<template>
  <div style="width: 100%; position: relative">
    <el-table
      :data="newList"
      :row-class-name="rowBrandDescriptionIndex"
      @selection-change="handleBrandDescriptionSelectionChange"
      ref="brandDescription"
    >
      <el-table-column
        type="selection"
        align="center"
        :selectable="selectable"
      />
      <el-table-column label="语言类型">
        <template #default="scope">
          <el-select
            v-model="scope.row.languageId"
            placeholder="请选择语言类型"
            :disabled="showDisabled(scope.row.index)"
          >
            <el-option
              v-for="dict in sys_language_type"
              :key="dict.id"
              :label="dict.description"
              :value="dict.id"
              :disabled="!dict.status"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column :label="props.label">
        <template #default="scope">
          <el-input
            v-model.trim="scope.row.name"
            placeholder="请输入(限制字数100)"
            :maxlength="100"
          />
        </template>
      </el-table-column>
      <el-table-column label="备注" v-if="props.showRemark">
        <template #default="scope">
          <el-input
            v-model.trim="scope.row.description"
            placeholder="请输入(限制字数300)"
            :maxlength="300"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  <script setup>
import { ref, defineProps, defineEmits } from "vue";
const emits = defineEmits(["publicCheck"]);
const sys_language_type = ref([]); //语言数据
const checkedBrandDescription = ref([]); //勾选的数据

const props = defineProps({
  //   数据列表
  newList: {
    type: Array,
    default: [],
  },
  label: {
    type: String,
    default: "",
  },
  showControls: {
    type: Boolean,
    default: false,
  },
  showRemark: {
    type: Boolean,
    default: false,
  },
});

onMounted(() => {
  getLanguage();
});

/** 序号 */
const rowBrandDescriptionIndex = ({ row, rowIndex }) => {
  row.index = rowIndex + 1;
};
/** 复选框选中数据 */
const handleBrandDescriptionSelectionChange = (selection) => {
  checkedBrandDescription.value = selection.map((item) => item.index);
  emits("publicCheck", checkedBrandDescription.value);
};
/** 添加红色星星 */
const addRedStar = ({ column }) => {
  return [
    h("span", { style: "color: red" }, "*"),
    h("span", " " + column.label),
  ];
};
const selectable = (rowItem) => {
  return rowItem.index !== 1; // 非编辑模式下，禁用第一行
};
// 语言列表
const getLanguage = () => {
  product.language.languageList().then((res) => {
    sys_language_type.value = res.data;
  });
};
const showDisabled = (index) => {
  if (props.showControls) {
    return true;
  } else {
    return index === 1 ? true : false;
  }
};
</script>